<template>
  <div class="home">
    <div class="row1">
      <Card class="row1-card">
        <Module5 />
      </Card>
      <Card class="row1-card">
        <Module6 :sourceData="moduleData4" />
      </Card>
      <Card class="row1-card">
        <Module7 :sourceData="moduleData4" />
      </Card>
    </div>
    <div class="row2">
      <Card class="row2-left">
        <div class="md1-div">
          <Module1 />
        </div>
        <div class="md1-div">
          <Module3 :txt="projectAbbreviation" />
        </div>
      </Card>
      <div class="row2-middle">
        <Card>
          <Module2 :data="carouselPicList" />
        </Card>
      </div>
      <Card class="row2-right">
        <div class="md1-div">
          <Module8 :data="moduleData8" />
        </div>
        <div class="md1-div">
          <Module9 :data="moduleData9" />
        </div>
      </Card>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, toRaw, watch } from 'vue'

import {
  getProjectStatics,
  getHouseDeviceList,
  getUserDeviceCount,
  getProjectNews
} from '@/api'

import Card from '@/components/wcard/index.vue'
import Module1 from './components/module1.vue'
import Module2 from './components/module2.vue'
import Module3 from './components/module3.vue'
import Module4 from './components/module4.vue'
import Module5 from './components/module5.vue'
import Module6 from './components/module6.vue'
import Module7 from './components/module7.vue'
import Module8 from './components/module8.vue'
import Module9 from './components/module9.vue'

import MapBox from './chartmodule/mapbox.vue'
// import Module5 from './components/module5.vue'

import imgUrl1 from '@/assets/img/1.png'
import imgUrl5 from '@/assets/img/5.png'
import imgUrl29 from '@/assets/img/29.png'
import imgUrl24 from '@/assets/img/24.png'
import imgUrl25 from '@/assets/img/25.png'

const toolOptions = [
  {
    icon: imgUrl5,
    name: '作物品种',
    value: 0,
    key: 'cropCount'
  },
  {
    icon: imgUrl25,
    name: '地面面积',
    value: 0,
    unit1: '万',
    unit2: 'm²',
    key: 'landArea'
  },
  {
    icon: imgUrl24,
    name: '设备数量',
    value: 0,
    key: 'deviceCount'
  },
  {
    icon: imgUrl29,
    name: '地块任务',
    value: 0,
    key: 'landTask'
  }
]
// 简介
const projectAbbreviation = ref('')

const carouselPicList = ref([])

const toolList = ref([])

const farmLandInfoVoList = ref([]) // 地图上相关地块信息

// 当前大棚信息
const currentDpInfor = ref({
  name: ''
})

const dpData = ref([])

const headerMenu = ref(false)

const moduleData4 = ref({})

const moduleData8 = ref([])

const moduleData9 = ref([])

onMounted(() => {
  getProjectStatics({
    id: 1
  }).then((res) => {
    if (res.code === 200) {
      const { data = {} } = res
      projectAbbreviation.value = data.projectAbbreviation || ''
      carouselPicList.value = data.carouselPicList || []
      toolList.value = toolOptions.map((item) => {
        return {
          ...item,
          value: data[item.key]
        }
      })
      const _farmLandInfoVoList = data.farmLandInfoVoList || []
      farmLandInfoVoList.value = _farmLandInfoVoList
      if (_farmLandInfoVoList.length > 0) {
        const _greenhouseInfoVoList =
          _farmLandInfoVoList[0].greenhouseInfoVoList || []
        dpData.value = _greenhouseInfoVoList
        if (_greenhouseInfoVoList.length > 0) {
          currentDpInfor.value = {
            name: _greenhouseInfoVoList[0].name,
            id: _greenhouseInfoVoList[0].id
          }
        }
      }
    }
  })
  document.addEventListener('click', (e) => {
    if (headerMenu.value) {
      headerMenu.value = false
    }
  })
})

const headermenuClick = (e) => {
  headerMenu.value = !headerMenu.value
  e.stopPropagation()
}

const headerMenuItemClick = (item) => {
  const val = toRaw(item)
  currentDpInfor.value = {
    name: val.name,
    id: val.id
  }
}

const markerClick = (item) => {
  const _greenhouseInfoVoList = item.greenhouseInfoVoList || []
  if (_greenhouseInfoVoList.length > 0) {
    dpData.value = _greenhouseInfoVoList
    currentDpInfor.value = {
      name: _greenhouseInfoVoList[0].name,
      id: _greenhouseInfoVoList[0].id
    }
  } else {
    dpData.value = []
    currentDpInfor.value = {
      name: '',
      id: ''
    }
  }
}

watch(
  () => currentDpInfor.value,
  (newValue) => {
    const val = toRaw(newValue)
    if (!val.id) {
      moduleData4.value = {}
      return false
    }
    getUserDeviceCount({
      greenHouseId: val.id
    }).then((res) => {
      if (res.code === 200) {
        moduleData8.value = res.data
      }
    })

    getHouseDeviceList({
      id: val.id
    }).then((res) => {
      if (res.code === 200) {
        moduleData4.value = res.data || {}
      }
    })
    getProjectNews({
      id: val.id
    }).then((res) => {
      if (res.code === 200) {
        moduleData9.value = res.data || []
        // moduleData5.value = res.data
      }
    })
  }
)
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 420px 1fr;
  grid-gap: 30px;
  .row1 {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    // gap: 20px;
    height: 100%;
    // overflow: hidden;
    .row1-card {
      min-height: 0;
    }
  }
  .row2 {
    flex: 1;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
    overflow: hidden;
    .row2-left {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
      flex-direction: column;
      min-height: 0px;
      .md1-div {
        flex: 1;
        width: 100%;
        min-height: 0px;
        flex-shrink: 0;
        :deep(.module1) {
          padding-top: 20px;
        }
      }
    }
    .row2-right {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
      flex-direction: column;
      min-height: 0px;
      .md1-div {
        flex: 1;
        width: 100%;
        min-height: 0px;
        flex-shrink: 0;
        :deep(.module1) {
          padding-top: 20px;
        }
      }
    }
  }
  .map-card {
    height: 100%;
    width: 100%;
    // padding: 4px;
    padding: 12px 10px;
    overflow: hidden;
    box-sizing: border-box;
  }
  .dp {
    position: relative;
    padding: 17px 0px;
    box-sizing: border-box;
    // flex: 1;
    height: 100%;
    min-width: 0;
    .cadr-header {
      width: 160px;
      height: 50px;
      position: absolute;
      background: url('@/assets/img/dp.png') no-repeat center;
      background-size: 100% 100%;
      position: absolute;
      left: 50%;
      top: 0px;
      transform: translate(-50%, -50%);
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 18px;
      color: #c3ff55;
      line-height: 29px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 7px;
      .icon {
        width: 11px;
        height: 6px;
      }
      .header-menu {
        position: absolute;
        top: 100%;
        left: 0px;
        width: 100%;
        background: rgba(4, 21, 21, 0.8);
        border-radius: 10px;
        border: 1px solid #07a680;
        .header-menu-item {
          width: 100%;
          padding: 14px 0px;
          text-align: center;
          box-sizing: border-box;
          cursor: pointer;
          &:hover {
            background: rgba(255, 255, 255, 0.5);
          }
        }
      }
    }
  }
  .map-parent {
    width: 100%;
    height: 100%;
    position: relative;
    .map-mark {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      z-index: 4;
      pointer-events: none;
      background: radial-gradient(
        circle at center,
        transparent 10%,
        #1c6f98 80%,
        #1c6f98
      );
    }
    .tool-box {
      position: absolute;
      z-index: 5;
      width: 100%;
      top: 30px;
      display: flex;
      justify-content: space-around;
      align-items: stretch;
      .tool-item {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        .tool-item-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          .icon {
            width: 69px;
            height: 64px;
            display: block;
          }
        }
        .tool-item-right {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-direction: column;
          .tool-item-value {
            font-family: DIN;
            font-weight: bold;
            font-size: 28px;
            color: #ffffff;
            line-height: 30px;
            display: flex;
            align-items: baseline;
          }
          .tool-item-name {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            line-height: 30px;
          }
        }
      }
    }
  }
  .unit1 {
    font-family: DIN;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
  }
  .unit2 {
    font-family: DIN;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
  }
}
</style>
